<script setup lang="ts">
import { ref, createVNode, defineExpose } from "vue";
const drawer = ref(false);
import { ElProgress } from "element-plus";

const columns = [
  {
    label: "预算项",
    align: "center",
    prop: "name"
  },
  {
    label: "预算金额",
    align: "center",
    prop: "money"
  },
  {
    label: "实际支出",
    align: "center",
    prop: "money1"
  },
  {
    label: "结余",
    align: "center",
    prop: "money2"
  },
  {
    label: "支出率",
    align: "center",
    prop: "action",
    slot: "action",
    width: 160
  }
];
const tableData1 = [
  {
    name: "讲师费",
    money: "100000",
    money1: "80000",
    money2: "20000",
    action: 80
  },
  {
    name: "场地费",
    money: "200000",
    money1: "180000",
    money2: "20000",
    action: 90
  },
  {
    name: "交通费",
    money: "100000",
    money1: "110000",
    money2: "-10000",
    action: 110
  }
];
const getSummaries = param => {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "总计";
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (!values.every(value => Number.isNaN(value)) && index !== 4) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0)}`;
    } else {
      let rates = (sums[index - 2] / sums[index - 3]) * 100;
      sums[index] = createVNode(ElProgress, {
        percentage: rates,
        status: statusClick(rates),
        textInside: true,
        strokeWidth: 15,
        strokeLinecap: "butt"
      });
    }
  });
  return sums;
};
const statusClick = rate => {
  let status = "";
  if (rate <= 80) {
    status = "warning";
  } else if (rate > 80 && rate < 100) {
    status = "success";
  } else if (rate > 100) {
    status = "exception";
  }

  return status;
};
const title = ref("");
const openDrawer = row => {
  drawer.value = true;
  title.value = row.name;
};
defineExpose({
  openDrawer
});
</script>

<template>
  <el-drawer v-model="drawer" :title="`${title}`" direction="rtl" size="600px">
    <pure-table
      :data="tableData1"
      :columns="columns"
      stripe
      show-summary
      :summary-method="getSummaries"
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
    >
      <template #action="{ row }">
        <el-progress
          :text-inside="true"
          :stroke-width="15"
          stroke-linecap="butt"
          :percentage="row.action"
          :status="statusClick(row.action)"
        />
      </template>
    </pure-table>
  </el-drawer>
</template>

<style lang="scss" scoped>
:deep(.el-progress) {
  .el-progress-bar__outer {
    border-radius: 0;
    overflow-x: visible;
  }
  .el-progress-bar__inner {
    border-radius: 0;
  }
  &.is-exception {
    .el-progress-bar__innerText {
      right: 16px;
      position: relative;
    }
  }
}
</style>
